<script setup lang="ts">
defineOptions({
  name: "fabBoardModelBox"
});

import { ref, inject, watch } from "vue";
import modelBox from "@/views/common/components/modelBox/index.vue";

const areaOptions = inject("areaOptions", ref<Array<any>>([]));

interface Props {
  title: string;
}

const props = withDefaults(defineProps<Props>(), {
  title: ""
});

const area = defineModel({ type: String, default: "" });
const loading = defineModel("loading", { type: Boolean, default: false });

const emits = defineEmits(["change"]);

const areaChangeHandler = async (val: string, flag: boolean = false) => {
  emits("change", val, flag);
};

const water = watch(
  () => areaOptions.value,
  async val => {
    if (val?.length) {
      area.value = val[0]?.value;
      await areaChangeHandler(val[0]?.value, true);
      water();
    }
  }
);
</script>

<template>
  <modelBox :title="title">
    <template #title>
      <div class="model-box-slot-title">
        <slot name="extraTitle" />
        <px-select v-model="area" style="width: 100px" size="small" placeholder="请选择区域" @change="areaChangeHandler">
          <px-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value" />
        </px-select>
      </div>
    </template>
    <div v-loading="loading" class="fab-board-model-box-content">
      <slot />
    </div>
  </modelBox>
</template>

<style lang="scss" scoped>
.fab-board-model-box-content {
  width: 100%;
  height: 100%;
}

.model-box-slot-title {
  display: flex;
  gap: 16px;
  align-items: center;
}
</style>
